<template>
  <div>
    <view> </view>
    <view>
      <u-tabs-swiper
        ref="tabs"
        :list="list"
        :is-scroll="false"
        :current="current"
        duration=""
        @change="tabsChange"
      ></u-tabs-swiper>
    </view>
    <view class="h-100">
      <swiper
        style="height: 80vh"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item">
          <scroll-view scroll-y class="h-100" style="width: 100%">
            <order-card
              :list="ordersList"
              :keyname="'all-'"
              @handerRefresh="handerRefresh()"
            ></order-card>
          </scroll-view>
        </swiper-item>
        <!-- #ifdef H5 -->
        <swiper-item class="swiper-item">
          <scroll-view scroll-y class="h-100" style="width: 100%">
            <order-card
              :list="ordersWaitList"
              :keyname="'a_wait-'"
              @handerRefresh="handerRefresh()"
            ></order-card>
          </scroll-view>
        </swiper-item>
        <!-- #endif -->
        <swiper-item class="swiper-item">
          <scroll-view scroll-y class="h-100" style="width: 100%">
            <order-card
              :list="ordersOverList"
              :keyname="'ok-'"
              @handerRefresh="handerRefresh()"
            ></order-card>
          </scroll-view>
        </swiper-item>
        <!-- <swiper-item class="swiper-item">
          <scroll-view scroll-y class="h-100" style="width: 100%">
            <order-card :list="ordersOverList"></order-card>
          </scroll-view>
        </swiper-item> -->
        <!-- <swiper-item class="swiper-item"></swiper-item> -->
      </swiper>
    </view>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import OrderCard from "@/components/order-card/order-card";
export default {
  //    name: '',
  components: {
    OrderCard,
  },
  data() {
    return {
      current: 0, // tab current 活动tab
      swiperCurrent: 0, // 页面 current
      dx: 0,
      pageDataList: [], // 页面数据  按照index 排序
      ordersList: [],
      ordersOverList: [], // 已经完成的订单
      ordersWaitList: [], // 正在等待的订单
      list: [
        {
          name: "全部订单",
        },
        // #ifdef H5
        {
          name: "等待订单",
        },
        // #endif
        {
          name: "完成订单",
          count: 12,
        },
      ],
    };
  },
  components: {},
  async onLoad() {
    // this.setPageData(0);
    await this.getOrdersList();
  },
  async onShow() {
    await this.getOrdersList();
  },
  async onPullDownRefresh() {
    //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
    console.log("refresh");
    console.log(this.current);
    uni.stopPullDownRefresh(); //停止下拉刷新动画
  },
  computed: {
    ...mapGetters(["getProduct"]),
  },
  methods: {
    ...mapMutations(["SET_GOODS"]),
    setPageData(index) {
      this.getOrders(index);
    },
    async getOrdersList() {
      let that = this;

      let _goods = await that.$u.api.getALLgoods();
      that.$store.state.goods = [];
      _goods.list.forEach((ele) => {
        that.SET_GOODS(ele);
      });

      // 获取全部订单
      that.$u.api.getOrderAll().then((res) => {
        that.ordersList = res;
        // that.ordersOverList
        if (that.ordersList) {
          that.ordersOverList = [];
          that.ordersWaitList = [];
          that.ordersList.forEach(async (e) => {
            if (e.orderStatus == 4 || e.confirmStatus == 1) {
              that.ordersOverList.push(e);
            }
            if (e.orderStatus >= 1 && e.confirmStatus != 1) {
              // 无法监听到长度等 的变动
              that.ordersWaitList.push(e);
            }
          });
        }
        else{}
      });
      // #ifdef H5
      if (that.ordersWaitList) {
        // that.swiperCurrent = 1;
        // that.current = 1;
      }
      // #endif
    },
    // tab-swiper   切换效果
    tabsChange(index) {
      console.log(index);
      this.swiperCurrent = index;
    },
    // page 切换  改变 tab-swiper
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // 触发更新
    async handerRefresh() {
      this.getOrdersList();
    },
  },
};
</script>

<style lang="scss" scoped>
// 订单页面骨架 不用 css
@import "~@/pages/orders/orders.scss";
</style>
